<template>
  <div class="com-dialog">
    <el-dialog
      :visible.sync="show"
      :width="option.width || '60%'"
      v-drag="option.drag"
      :destroy-on-close="true"
      :fullscreen="fullscreen"
      @close="closeDialogHandler"
    >
      <template slot="title">
        <slot name="title">
          <div class="dialog-title-box">
            <span class="title">{{ option.title || "弹窗" }}</span>
            <span
              class="fullscreen"
              v-if="option.isFullscreen"
              @click="fullscreen = !fullscreen"
              ><i class="el-icon-full-screen"></i
            ></span>
          </div>
        </slot>
      </template>
      <slot />
      <!-- footer 插槽可以自定义按钮 -->
      <span
        slot="footer"
        class="dialog-footer"
        :style="{ textAlign: option.btnAlign || 'center' }"
      >
        <el-button
          v-if="isShow(option.submitBtn)"
          :size="option.size || 'small'"
          :loading="loading"
          :type="option.submitBtnType || 'primary'"
          @click="submit"
          >{{ submitBtnText || "确定" }}</el-button
        >
        <el-button
          v-if="isShow(option.cancelBtn)"
          :size="option.size || 'small'"
          :disabled="loading"
          :type="option.cancelBtnType || ''"
          @click="closeDialogHandler"
          >{{ option.cancelBtnText || "取消" }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ComDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      show: false, // 显示弹窗
      loading: false, // 按钮加载动画
      fullscreen: false, // 是否全屏
    };
  },
  computed: {
    submitBtnText() {
      if (this.loading) return "提交中";
      return this.option.submitBtnText;
    },
  },
  watch: {
    show: function (newVal) {
      this.$emit("update:visible", newVal);
    },
    visible: function (newVal) {
      this.show = newVal;
    },
  },
  methods: {
    isShow(e) {
      return e === false ? false : true;
    },
    /** 关闭dialog */
    closeDialogHandler() {
      this.loading = false;
      this.show = false;
      this.$emit("on-close");
    },

    /** 确定按钮触发 */
    submit() {
      this.onLoading();
      this.$emit(
        "on-submit",
        () => {
          this.closeDialogHandler();
        },
        () => {
          this.endLoading();
        }
      );
    },

    /** 加载时确定按钮文字和状态 */
    onLoading() {
      this.loading = true;
    },

    /** 完成加载后得确认按钮文字和状态 */
    endLoading() {
      this.loading = false;
    },
  },
  // 可移动弹窗自定义命令
  directives: {
    drag: {
      bind(el, binding) {
        if (!binding.value) {
          return;
        }
        let dialogHeader = el.querySelector(".el-dialog__header");
        let dialogEl = el.querySelector(".el-dialog");
        dialogHeader.style.cursor = "move";
        dialogEl.style.left = "0px";
        dialogEl.style.top = "0px";
        dialogEl.style.marginBottom = "0px";
        const sty =
          dialogEl.currentStyle || window.getComputedStyle(dialogEl, null);
        dialogHeader.onmousedown = (e) => {
          let disX = e.clientX - dialogHeader.offsetLeft;
          let disY = e.clientY - dialogHeader.offsetTop;
          //  可见局域宽
          let clientWidth = document.body.clientWidth;
          // 可见区域高
          let clientHeight = document.documentElement.clientHeight;
          // 对话框宽度
          let dialogElWidth = dialogEl.offsetWidth;
          // 对话框高度
          let dialogHeight = dialogEl.offsetHeight;
          // 对话框距离左边距离
          let minDialogElLeft = dialogEl.offsetLeft;
          // 对话框距离右边距离
          let maxDialogElLeft =
            clientWidth - dialogEl.offsetLeft - dialogElWidth;
          // 对话框距离上边距离
          let minDialogElTop = dialogEl.offsetTop;
          // 对话框距离下边距离
          let maxDialogElTop = clientHeight - dialogEl.offsetTop - dialogHeight;
          // 元素现在left
          let styL = Number(sty.left.replace(/\px/g, ""));
          let styT = Number(Number(sty.top.replace(/\px/g, "")));
          document.onmousemove = function (e) {
            let left = e.clientX - disX;
            let top = e.clientY - disY;
            if (-left > minDialogElLeft) {
              left = -minDialogElLeft;
            } else if (left > maxDialogElLeft) {
              left = maxDialogElLeft;
            }
            if (-top > minDialogElTop) {
              top = -minDialogElTop;
            } else if (top > maxDialogElTop) {
              top = maxDialogElTop;
            }
            dialogEl.style.left = styL + left + "px";
            dialogEl.style.top = styT + top + "px";
          };
          document.onmouseup = function (e) {
            console.log(e);
            document.onmousemove = null;
            document.onmousedown = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
};
</script>

<style scoped lang="less">
.dialog-title-box {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  display: flex;
  justify-content: space-between;

  .fullscreen {
    transform: translate(-30px, -4px);
    cursor: pointer;
    :hover {
      color: #409eff;
    }
  }
}

.dialog-footer {
  display: block;
}
</style>
